<template>
  <div class="mobile-content">
    <CellGroup>
      <Cell title="TMDB设置" label="用于识别媒体信息" is-link center @click="tmdbShowFunc" />
      <Cell title="Jackett设置" label="使用Jackett搜索时需要" is-link center @click="jackettShowFunc" />
      <Cell title="Jellyfin设置" label="同步媒体库信息" is-link center @click="jellyfinShowFunc" />
      <Cell title="通知设置" label="暂未实现" is-link center />
      <Cell title="修改密码" label="暂未实现" is-link center />
    </CellGroup>

    <ActionSheet v-model:show="jackettShow" title="Jackett设置">
      <Form @submit="jackettSubmit" @failed="onFailed">
        <CellGroup title="" inset>
          <Field v-model.trim="jackettForm.url" label="地址" placeholder="" clearable autocomplete="no" />
          <Field v-model.trim="jackettForm.apiKey" label="ApiKey" placeholder="" clearable autocomplete="no" />
        </CellGroup>
        <div style="margin: 16px;">
          <Button round block type="primary" native-type="submit" loading-type="spinner" :loading="submitting">
            保 存
          </Button>
        </div>
      </Form>

    </ActionSheet>


    <ActionSheet v-model:show="tmdbShow" title="TMDB设置">
      <Form @submit="tmdbSubmit" @failed="onFailed">
        <CellGroup title="" inset>
          <!-- <Field v-model.trim="tmdbForm.host" label="地址" placeholder="" clearable autocomplete="no" /> -->
          <Field v-model.trim="tmdbForm.apiKey" label="ApiKey" placeholder="" clearable autocomplete="no" />
          <Field v-model.trim="tmdbForm.proxy" label="代理服务器" placeholder="格式: socks5://127.0.0.1:7890" clearable autocomplete="no" />
        </CellGroup>
        <div style="margin: 16px;">
          <Button round block type="primary" native-type="submit" loading-type="spinner" :loading="submitting">
            保 存
          </Button>
        </div>
      </Form>
    </ActionSheet>

    <ActionSheet v-model:show="jellyfinShow" title="Jellyfin设置">
      <Form @submit="jellyfinSubmit" @failed="onFailed">
        <CellGroup title="" inset>
          <Field v-model.trim="jellyfinForm.host" label="地址" placeholder="" clearable autocomplete="no" />
          <Field v-model.trim="jellyfinForm.apiKey" label="ApiKey" placeholder="" clearable autocomplete="no" />
        </CellGroup>
        <div style="margin: 16px;">
          <Button round block type="primary" native-type="submit" loading-type="spinner" :loading="submitting">
            保 存
          </Button>
        </div>
      </Form>

    </ActionSheet>
  </div>
</template>
  
<script name="config-mobile" setup>
import { Form, Field, ActionSheet, Notify, Cell, CellGroup, Button } from 'vant';
import { reactive, ref, watchEffect, nextTick } from 'vue';

import ConfigApi from '@/api/ConfigApi.js'


let config = {};

const loadCongfig = async () => {
  const response = await ConfigApi.get();
  if (response.data.code === 1) {
    config = response.data.data;
    if (config.jackett) {
      jackettForm.value.url = config.jackett.url ? config.jackett.url : '';
      jackettForm.value.apiKey = config.jackett.apiKey ? config.jackett.apiKey : '';
    }
    if (config.tmdb) {
      tmdbForm.value.host = config.tmdb.host ? config.tmdb.host : '';
      tmdbForm.value.apiKey = config.tmdb.apiKey ? config.tmdb.apiKey : '';
      tmdbForm.value.proxy = config.tmdb.proxy ? config.tmdb.proxy : '';
    }
    if (config.jellyfin) {
      jellyfinForm.value.host = config.jellyfin.host ? config.jellyfin.host : '';
      jellyfinForm.value.apiKey = config.jellyfin.apiKey ? config.jellyfin.apiKey : '';
    }
  } else {
    Notify({ type: 'danger', message: `数据获取失败：${response.data.message}` });
  }
}

const submitting = ref(false);

const jackettShow = ref(false);
const jackettForm = ref({
  url: '',
  apiKey: '',
});
const jackettShowFunc = () => {
  jackettShow.value = true;
};

const jackettSubmit = async () => {
  submitting.value = true;
  const response = await ConfigApi.set({ jackett: JSON.stringify(jackettForm.value) })
  if (response.data.code === 1) {
    Notify({ type: 'success', message: `保存成功：${response.data.message}` });
  } else {
    Notify({ type: 'danger', message: `保存失败：${response.data.message}` });
  }
  submitting.value = false;
};




const tmdbShow = ref(false);
const tmdbForm = ref({
  host: '',
  apiKey: '',
  proxy: '',
});
const tmdbShowFunc = () => {
  tmdbShow.value = true;
};

const tmdbSubmit = async () => {
  submitting.value = true;
  const response = await ConfigApi.set({ tmdb: JSON.stringify(tmdbForm.value) })
  if (response.data.code === 1) {
    Notify({ type: 'success', message: `保存成功：${response.data.message}` });
  } else {
    Notify({ type: 'danger', message: `保存失败：${response.data.message}` });
  }
  submitting.value = false;
};



const jellyfinShow = ref(false);
const jellyfinForm = ref({
  host: '',
  apiKey: '',
});
const jellyfinShowFunc = () => {
  jellyfinShow.value = true;
};

const jellyfinSubmit = async () => {
  submitting.value = true;
  const response = await ConfigApi.set({ jellyfin: JSON.stringify(jellyfinForm.value) })
  if (response.data.code === 1) {
    Notify({ type: 'success', message: `保存成功：${response.data.message}` });
  } else {
    Notify({ type: 'danger', message: `保存失败：${response.data.message}` });
  }
  submitting.value = false;
};

const onFailed = () => {

};

// init functions
loadCongfig();
</script>
<style scoped>
</style>